import React, { Component } from "react";
import { View, Text, Image, StyleSheet, ScrollView, ImageBackground, TouchableWithoutFeedback } from "react-native";
import CustomerHeader from "../../widget/customerHeader";
import {statusBarHeight,width} from '../../util/apdater_util';
import  LinearGradient from 'react-native-linear-gradient';
import img_arr from "../../util/img_arr";
import * as RootNavigation from '../../../App'

export default class MyIntegral extends Component{
  constructor(props) {
    super(props);
    this.navBar=null;
    this.state={
      backIconIsWhite:true
    }
  }
  mall(){
    RootNavigation.navigate('MallList',{})
  }

  goToIntegralRecord(){
    RootNavigation.navigate('IntegralRecord',{})
  }

  render() {
    return(
      <View style={{flex:1,backgroundColor:'#F6F6F6'}}>
        <CustomerHeader canBack={true}
                        ref={ref => this.navBar = ref}
                        title={'我的积分'}
                        middleTxtStyle={{color:this.state.backIconIsWhite?'#fff':'#000000'}}
                        leftOnPress={()=>this.props.navigation.pop()}
                        leftImageView={this.state.backIconIsWhite?img_arr.icon_back_white:img_arr.icon_back_black}
                        style={styles.nav}>
          <Text onPress={this.goToIntegralRecord} style={{fontSize:14,color:this.state.backIconIsWhite?'#fff':'#000000',marginRight:15}}>收支记录</Text>
        </CustomerHeader>
        <ScrollView scrollEnabled={true}>
          <ImageBackground style={{height:245}} source={require('../../img/score_header_bg.png')}>
            <View style={[styles.flex,{marginTop:statusBarHeight+64}]}>
              <Image style={styles.portrait} source={{uri:'https://cdn.uviewui.com/uview/swiper/swiper2.png'}}></Image>
              <View style={styles.userInfo}>
                <Text style={{fontSize:25,color:'#fff',fontWeight:'500'}}>17<Text style={{color:'#fff',fontSize:13,fontWeight:'500'}}>积分</Text></Text>
                <Text style={styles.freeze}>冻结积分 2000</Text>
              </View>
              <TouchableWithoutFeedback onPress={this.mall}>
                <View style={styles.mall}>
                  <Image style={{width:12,height:12}} source={require('../../img/gift_icon.png')}></Image>
                  <Text style={{color:'#fff',fontSize:12,marginLeft:7}}>积分商城</Text>
                </View>
              </TouchableWithoutFeedback>
            </View>
          </ImageBackground>
          <View style={styles.signBox}>
            <Text style={styles.sectionTitle}>每日签到</Text>
            <View style={styles.days}>
              <View style={styles.day}>
                <Image style={{width:30,height:30}} source={require('../../img/score_add.png')}></Image>
                <Text style={{color:'#BDBDBD',fontSize:11,fontWeight:'500',marginTop:4}}>11-02</Text>
              </View>
              <View style={styles.day}>
                <Image style={{width:30,height:30}} source={require('../../img/score_add.png')}></Image>
                <Text style={{color:'#BDBDBD',fontSize:11,fontWeight:'500',marginTop:4}}>11-02</Text>
              </View>
              <View style={styles.day}>
                <Image style={{width:30,height:30}} source={require('../../img/score_add.png')}></Image>
                <Text style={{color:'#BDBDBD',fontSize:11,fontWeight:'500',marginTop:4}}>11-02</Text>
              </View>
              <View style={styles.day}>
                <Image style={{width:30,height:30}} source={require('../../img/score_add.png')}></Image>
                <Text style={{color:'#BDBDBD',fontSize:11,fontWeight:'500',marginTop:4}}>11-02</Text>
              </View>
              <View style={styles.day}>
                <Image style={{width:30,height:30}} source={require('../../img/score_add.png')}></Image>
                <Text style={{color:'#BDBDBD',fontSize:11,fontWeight:'500',marginTop:4}}>11-02</Text>
              </View>
              <View style={styles.day}>
                <Image style={{width:30,height:30}} source={require('../../img/score_add.png')}></Image>
                <Text style={{color:'#BDBDBD',fontSize:11,fontWeight:'500',marginTop:4}}>11-02</Text>
              </View>
              <View style={styles.day}>
                <Image style={{width:30,height:30}} source={require('../../img/score_add.png')}></Image>
                <Text style={{color:'#BDBDBD',fontSize:11,fontWeight:'500',marginTop:4}}>11-02</Text>
              </View>
            </View>
            <View style={styles.signBtn}>
              <Text style={styles.signTitle}>已签到</Text>
            </View>
          </View>
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>日常任务</Text>
            <View style={styles.scoreBox}>
              <Image style={{width:27,height:27,borderRadius:13.5}} source={{uri:'https://cdn.uviewui.com/uview/swiper/swiper2.png'}}></Image>
              <View style={styles.scoreInfo}>
                <Text style={{color:'#000000',fontSize:14}}>每获得一次最佳答案</Text>
                <View style={[styles.scoreFlex,{marginTop:12}]}>
                  <Image style={{width:12,height:12}} source={require('../../img/give_score.png')}></Image>
                  <Text style={{color:'#A88729',marginLeft:5,fontSize:10}}>20积分</Text>
                </View>
              </View>
              <LinearGradient style={styles.giveBtn} colors={['#e79c58','#f8da85']} start={{x:0,y:1}}>
                <Text style={styles.giveTitle}>去投稿</Text>
              </LinearGradient>
            </View>
            <View style={styles.scoreBox}>
              <Image style={{width:27,height:27,borderRadius:13.5}} source={{uri:'https://cdn.uviewui.com/uview/swiper/swiper2.png'}}></Image>
              <View style={styles.scoreInfo}>
                <Text style={{color:'#000000',fontSize:14}}>每获得一次最佳答案</Text>
                <View style={[styles.scoreFlex,{marginTop:12}]}>
                  <Image style={{width:12,height:12}} source={require('../../img/give_score.png')}></Image>
                  <Text style={{color:'#A88729',marginLeft:5,fontSize:10}}>20积分</Text>
                </View>
              </View>
              <LinearGradient style={styles.giveBtn} colors={['#e79c58','#f8da85']} start={{x:0,y:1}}>
                <Text style={styles.giveTitle}>去投稿</Text>
              </LinearGradient>
            </View>
          </View>
        </ScrollView>
      </View>
    )
  }
}

const styles=StyleSheet.create({
  nav:{
    position:'absolute',
    top:0,
    left:0,
    right:0,
    backgroundColor:'rgba(255,255,255,0)',
    zIndex:9999
  },
  flex:{
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
  },
  portrait:{
    width:46,
    height:46,
    borderRadius:23,
    marginLeft:15
  },
  userInfo:{
    flex:1,
    marginLeft:12
  },
  freeze:{
    // color:'rgba(255,255,255,0,5)',
    color:'#ffffff90',
    fontSize:13,
    marginTop:8
  },
  mall:{
    width:86,
    height:26,
    borderWidth:1,
    borderStyle:'solid',
    borderColor:'#fff',
    borderRadius:13,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginRight:15
  },
  signBox:{
    backgroundColor: '#fff',
    borderRadius:7,
    paddingHorizontal:16,
    paddingTop:18,
    height:162,
    marginHorizontal:15,
    marginTop:-70,
  },
  days:{
    flexDirection:'row',
    justifyContent:'space-around',
    alignItems:'center',
    marginTop:15
  },
  day:{
    flex:1,
    justifyContent:'center',
    alignItems:'center'
  },
  signBtn:{
    width:154,
    height:34,
    borderRadius:17,
    backgroundColor:'#D9D9D9',
    marginLeft:width/2.0-30-78,
    marginTop:14
  },
  signTitle:{
    color:'#fff',
    flex:1,
    lineHeight:34,
    textAlign:'center',
    fontSize: 14,
    fontWeight:'500',
  },
  sectionTitle:{
    color:'#000000',
    fontSize:16,
    fontWeight: '500'
  },
  section:{
    paddingHorizontal: 18,
    paddingTop: 19,
    paddingBottom:25,
    backgroundColor:'#fff',
    borderRadius:7,
    marginTop:10,
    marginHorizontal:15
  },
  scoreBox:{
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
    marginTop:25
  },
  scoreInfo:{
    flex:1,
    marginLeft:6
  },
  scoreFlex:{
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center'
  },
  giveBtn:{
    width:65,
    height:28,
    borderRadius:14
  },
  giveTitle:{
    flex:1,
    color:'#fff',
    fontSize:11,
    textAlign: 'center',
    lineHeight: 28
  }
})
